<template>
	<view class="">
		<headerinfo></headerinfo>
		<view class="width60">
			<view class="daozuo">
				<view class="actions" >
					<view class="action-item">
						<u-icon name="home" size="40px" color="#de4849"></u-icon>
						<text style="color: #de4849;">首页</text>
					</view>
					<view class="action-item" @click="tabbarCheck(1)">
						<u-icon name="heart" size="40px"></u-icon>
						<text>纪念厅</text>
					</view>
					<view class="action-item" @click="tabbarCheck(2)">
						<u-icon name="chat" size="40px"></u-icon>
						<text>留言</text>
					</view>
				</view>
			</view>
			<view class="form">
				<u-navbar title="纪念馆" :autoBack="true" :bgColor="bgColor"
					:titleStyle="titleStyle" leftIconColor="#fff"></u-navbar>
				
				<view class="flex justify-between">
					
					<alljinian :docId="id"></alljinian>
					<view class="searchPage"
						:style="{ backgroundImage: `url(${info.museum.museumStyleImageUrl})`,height:navHeight+'px',width:'600px'}">
								
								
						<view class="title">
							{{info.museum.museumName}}
						</view>
								
						<view class="otherDesc">
							<view>{{info.museum.museumBuilder}}</view>
							<view>{{info.museum.museumTheme}}</view>
						</view>
				
					</view>
					<allting :id="id"></allting>
				</view>
				
			</view>
		</view>
		
	</view>
	

</template>

<script>
	import alljinian from './components/alljinian'
	import allting from './components/allting'
	export default {
		components: {alljinian,allting},
		data() {
			return {
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				id: '',
				info: {"museum":{"museumStyleImageUrl":""}},
				tabbarIndex: 0,
				safeAreaInsets: {},
				navHeight: 0
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getInfo()
		},
		onShow() {
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets
			console.log(safeAreaInsets)

			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success: (res) => { //成功回调函数
					const windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					console.log(windowHeight)
					this.navHeight = (windowHeight - 44 - 50 - this.safeAreaInsets.top - this.safeAreaInsets
						.bottom)
				}
			})
		},
		methods: {
			tabbarCheck(index) {
				if (index == 1) {
					uni.redirectTo({
						url: `/pagesobit/obit/ting?id=${this.id}`
					})
				} else {
					uni.redirectTo({
						url: `/pagesobit/obit/liuyan?id=${this.id}`
					})
				}
			},
			getInfo() {
				let data = {
					museumId: this.id
				}
				this.$api.museumgetMuseum(data).then(res => {
					this.info = res
				})
			},
		}
	};
</script>


<style lang="scss" scoped>
	.formBox{
		display: flex;
		justify-content: space-between;
		// height: calc(100vh - 250rpx);
		padding: 0 40rpx;
		.tingleft{
			width: 300px;
			.tuijianVideo {
				margin-top: 30px;
				.titles {
					display: flex;
					align-items: center;
					justify-content: center;
			
					image {
						width: 40rpx;
						height: auto;
						margin-right: 10rpx;
					}
				}
			
				.videolist {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
			
					.listss {
						width: 48%;
						height: 170rpx;
						border-radius: 10rpx;
						overflow: hidden;
						margin-top: 30rpx;
						cursor: pointer;
			
						image {
							width: 100%;
							height: 100%;
			
						}
					}
				}
			}
			
		}
		
	}
	.searchPage {
		width: 450px;
		height: 100%;
		background-image: url('https://jn.huaien.com/static/img/memorial-body.png');
		background-size: 100% 100%;
		position: relative;
	}
	



	.title {
		position: absolute;
		top: 60rpx;
		color: #fff;
		font-size: 36rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.otherDesc {

		display: flex;
		align-items: flex-end;

		view:first-child {
			position: absolute;
			bottom: 9%;
			right: 23%;
			writing-mode: vertical-rl;
			font-size: 26rpx;
		}

		view:last-child {
			position: absolute;
			bottom: 9%;
			right: 17%;
			writing-mode: vertical-rl;
			font-size: 26rpx;
		}

	}
	
	
	
	/* 点赞等操作 */
	.actions {
		display: flex;
		align-items: center;
		line-height: 1.3;
		padding-right: 44upx;
		padding-top: 16upx;
		position: fixed;
		left: 0;
		left: 15%;
		flex-direction: column;
		top: 30%;
	
		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-right: 60upx;
			color: #333;
			margin-bottom: 80rpx;
			cursor: pointer;
			span{
				font-size: 24rpx;
			}
			.iconfont{
				font-size: 33px;
			}
		}
	
		.yticon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 52upx;
	
			&.reverse {
				position: relative;
				top: 6upx;
				transform: scaleY(-1);
			}
	
			&.active {
				color: #ec706b;
			}
		}
	
		.icon-fenxiang2 {
			font-weight: bold;
			font-size: 88upx;
		}
	
		.icon-shoucang {
			font-size: 88upx;
		}
	}
	
</style>